import React from 'react';
import {
    Button,
    Text,
    View,
    Image,
    StyleSheet,
    Dimensions,
    StatusBar,
    ActivityIndicator,
    FlatList,
    ScrollView,
    RefreshControl,
    Animated,
    TouchableOpacity,
    SectionList,
    DeviceEventEmitter,
    TextInput,
    Modal
} from 'react-native';
import { Card } from 'react-native-shadow-cards';
import QRCode from 'react-native-qrcode-svg';
import Styles from './Styles';
import app from '../../../app.json';
import Ugame from '../../../Ugame';
import Httpc from "../../utils/Httpc";
import REQUEST from "../../../REQUEST";
import Utils from "../../utils/Utils";

const { width, height } = Dimensions.get('window');
// 初始化总数据

export default class UserCertification extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            toastModelVisible: false,
            message: '',
            oldtruename:null,
            truename: null,
            idcard: null,
            isSend: false,
        };
        this.timeOut=null;
    }
    static navigationOptions = {
        title: '身份认证',
        //header: null,  //隐藏顶部导航栏
        //tabBarVisible: false, // 隐藏底部导航栏
        headerStyle: {
            backgroundColor: '#d0162e',
            paddingTop: 18,
        },
        headerTintColor: '#fff',
        headerTitleStyle: {

        },
    }
    componentWillMount() {
        //组件将要被加载到视图之前调用
    }
    componentWillUnmount(){
        clearTimeout(this.timeOut);
    }
    componentDidMount() {
        // 在调用了render方法，组件加载成功并被成功渲染出来之后，所要执行的后续操作，一般都会在这个函数中进行，比如经常要面对的网络请求等加载数据操作
        // *** 因为UI已经成功渲染，而且这里面是异步的，所以放在这个函数进行数据的请求等复杂的操作，不会出现UI错误**
        let navigation = this.props.navigation;
        // Ugame.isLogin(function () {
        //
        // },function () {
        //     navigation.navigate('Login')
        // })
        this.getServerData((res) => {
            if (!!res.truename && !!res.idcard) {
                this.setState({
                    oldtruename:res.truename,
                    truename: Utils.plusXing(res.truename, 1, res.truename.length),
                    idcard: Utils.plusXing(res.idcard, 1, res.idcard.length),
                });
            }

        });

    }
    getServerData(callback) {
        let _this = this;
        Httpc.get(REQUEST.GetUserInfo, { token: Ugame.info.Token }, function (res) {
            console.log(res);
            if (res.StatusCode == -2) {
                Ugame.clearInfo();
                this.setState({
                    isLogin: Ugame.isLogin()
                });
                this.props.navigation.navigate('Login');
            } else {
                if (res.StatusCode == 1) {
                    _this.setState({
                        userinfo: res.Data,
                    })
                }
                callback(res.Data);
            }

        })
    }
    do_SetUserCertification() {
        if (this.state.isSend) {
            return;
        }
        this.setState({
            isSend: true
        });
        if (this.state.truename == null) {
            this.do_toast('请输入真实姓名', 500, () => {
            });
            this.setState({ isSend: false });
            return;
        }
        if (this.state.idcard == null) {
            this.do_toast('请输入身份证号码', 500, () => {
            });

            this.setState({ isSend: false });
            return;
        }else{
            if (this.state.idcard.length == 15 || this.state.idcard.length == 18) {
                
            }else{
                this.do_toast('身份证号码格式不对', 500, () => {
                });
                this.setState({ isSend: false });
                return;
            }
        }
        let params = {};
        params.token = Ugame.info.Token;
        params.truename = this.state.truename;
        params.idcard = this.state.idcard;
        console.log(params);
        let navigation = this.props.navigation;
        Httpc.get(REQUEST.SetUserCertification, params, function (res) {
            this.do_toast(res.Message, 500, () => {
            });
            if (res.StatusCode != 1) {
                return;
            }
            this.setState({
                isSend: false
            });
            DeviceEventEmitter.emit('updateLogin', {});
            navigation.goBack();
        }.bind(this));
    }
    do_toast = (str, time, func) => {
        this.setState({
            message: str,
            toastModelVisible: true
        });
        this.timeOut=setTimeout(() => {
            this.setState({
                message: '',
                toastModelVisible: false
            });
            func();
        }, time);
    }
    toast = () => {
        return (
            <Modal
                animationType="fade"
                transparent={true}
                visible={this.state.toastModelVisible}
                onRequestClose={() => {
                    this.setState({
                        toastModelVisible: false
                    });
                }}
            >
                <View style={{ flexDirection: 'row', justifyContent: 'center', position: 'absolute', bottom: 100, width: width }}>
                    <Text style={{ backgroundColor: 'rgba(0,0,0,0.7)', color: '#ffffff', borderRadius: 10, height: 40, lineHeight: 40, paddingLeft: 20, paddingRight: 20 }}>{this.state.message}</Text>
                </View>
            </Modal>
        );
    }
    render() {
        return (
            <View style={Styles.container}>
                <StatusBar translucent={true} backgroundColor="transparent" />
                <View style={[Styles.inputItem, { marginTop: 20 }]}>
                    <TextInput
                        placeholder="请输入真实姓名"
                        placeholderTextColor="#CCC"
                        onChangeText={(truename) => this.setState({ truename })}
                        value={this.state.truename}
                        editable={this.state.oldtruename == null ? true : false}//是否可编辑
                    // onEndEditing={this.dissmissKeyboard.bind(this)}
                    />
                </View>
                <View style={Styles.inputItem}>
                    <TextInput
                        placeholder="请输入身份证号码"
                        placeholderTextColor="#CCC"
                        onChangeText={(idcard) => this.setState({ idcard })}
                        value={this.state.idcard}
                        editable={this.state.oldtruename == null ? true : false}//是否可编辑
                    // onEndEditing={this.dissmissKeyboard.bind(this)}
                    />
                </View>
                {!!this.state.oldtruename ?
                    null :
                    <View>
                        <Text style={{ fontSize: 12, color: '#969696', textAlign: 'center', padding: 10 }}>真实姓名及身份证号作为领奖的重要凭证，填写成功后不可更改</Text>
                        <TouchableOpacity onPress={() => this.do_SetUserCertification()}>
                            <View style={Styles.login_btn}>
                                <Text style={{ color: '#ffffff', fontSize: 16 }}>确认</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                }
                {this.toast()}
            </View>
        )
    }
}

